import React from 'react';
import ReactDOM from 'react-dom';
import { Pagination, Menu } from 'antd';
import BasicLayout from "@/src/layouts";
import Nav from "@components/nav";
import { MailOutlined, AppstoreOutlined, SettingOutlined, ClockCircleOutlined, FireOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css'
import PostThumbnail from './PostThumbnail';
import axios from 'axios';
import sty from "./Forum.module.css"
import API from '@common/api.js';
import userStore from "../../common/userStore";
const { SubMenu } = Menu;
class Forum extends React.Component {
  constructor(props) {
    super(props);
    this.changePage = this.changePage.bind(this);
    this.useAxiosToGetAPI = this.useAxiosToGetAPI.bind(this);
    this.changeOrder = this.changeOrder.bind(this);
    this.state = {
      currentPage: 1,
      order: 'rencent',
      postsInfo: []
    }
    console.log("Forum initialized!")
    this.useAxiosToGetAPI("recent", 1, 10).then((ret) => {
      console.log("The API result of posts' info is:");
      console.log(ret);
      console.log("The data is:");
      let data = ret["data"];
      console.log(data);
      this.state = {
        currentPage: 1,
        postsInfo: data,
        totalPosts: 100
      };
    });
    this.changeOrderFromSearch = this.changeOrderFromSearch.bind(this);
    userStore.subscribe(this.changeOrderFromSearch);
  }

  changeOrderFromSearch() {
    console.log('The order of userstore is:');
    console.log(userStore.getState().order);
    this.changeOrder({key: userStore.getState().order});
  }

  async useAxiosToGetAPI(order, from, to) {
    return await API.queryPostsInfo(order, from, to);
  }

  changeOrder(e) {
    this.useAxiosToGetAPI(e.key, 1, 10).then((res) => {
      this.setState({
        order: e.key,
        currentPage: 1,
        postsInfo: res['data'],
        totalPosts: 100,
      },
        () => {
          console.log('Current order is ' + this.state.order);
          console.log('Current page is ' + this.state.currentPage);
        });
    });
  }

  changePage(page, pageSize) {
    let start = (page - 1) * pageSize + 1;
    let end = page * pageSize;
    this.useAxiosToGetAPI(this.state.order, start, end).then((ret) => {
      console.log("The API result of posts' info is:");
      console.log(ret);
      console.log("The data is:");
      let data = ret["data"];
      console.log(data);

      this.setState({
        currentPage: page,
        postsInfo: data
      }, () => { console.log('Current page is ' + this.state.currentPage) });
    });
  }

  render() {
    console.log("Forum rendering!");
    const postThumbnailList = this.state.postsInfo.map(info => {
      // console.log(info.)
      return <PostThumbnail key={info.id} info={info} />;
    });
    return (
      <div className={sty.Forum}>

        <Menu mode="horizontal" selectedKeys={this.state.order} onClick={this.changeOrder}>
          <Menu.Item key="recent" icon={<ClockCircleOutlined />}>
            最新
          </Menu.Item>
          <Menu.Item key="popular" icon={<FireOutlined />}>
            热门
          </Menu.Item>
        </Menu>
        <div className={sty.List}> {postThumbnailList} </div>
        <Pagination className={sty.Pagi} total={this.state.totalPosts} current={this.state.currentPage} onChange={this.changePage}
          hideOnSinglePage={true} showSizeChanger={false} showQuickJumper={false}>
        </Pagination>

      </div>
    );
    // style={{backgroundColor: '#e6e6e6' }}
  }
}

export default Forum;